<%@ page language="java" import="java.util.*,com.beans.*,com.dao.*" pageEncoding="UTF-8"%> 
<%
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
             
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
  <head>
    <base href="<%=basePath%>"> 
    
    <title>My JSP 'index.jsp' starting page</title>
    <link rel="stylesheet" type="text/css" href="css/edittable.css"  ></link>  
		<link rel="stylesheet" type="text/css" href="css/validate.css"  ></link>  
		<script type="text/javascript"  src="js/jquery-1.8.0.js"></script>
     <script>	
			
	 
	 		function  checkGoodsName(){
	 				var result=true;
	 				var reg=/^.{2,20}$/;
	 				var goodsName=$("#goodsName").val();
					if(!reg.test(goodsName)){
					$("#goodsName_msg").html("商品名格式错误! ").css("color","red");
						result=false;
	 				}
					else{
						 $.ajax({
							 url:"GoodsServlet.do?flag=check",
							 type:"POST",
							 data:{goodsName:goodsName},
							 async:false,
							 success:function(data){
								 if("0"==data){
									 result=false;
									 $("#goodsName_msg").html("商品名重复!").css("color","red"); 
									 
								 }
									 
							 },
						});
					}
					 if(result==true){
						 $("#goodsName_msg").html("验证通过").css("color","green"); 
					 }
						
					return result;
	 			}
	 		function  checkDanWei(){
	 				var result=true;
					var reg=/^.{1,10}$/;
					if(!reg.test($("#danwei").val())){
						$("#danwei_msg").html("单位格式错误! ").css("color","red");
						result=false;
	 	   		} 
					else{
						$("#danwei_msg").html("验证通过 ").css("color","green");
						}
					return result;
 			}
			function  checkPrice(){
				var result=true;
				var reg=/^([0-9]{1,}[.]?[0-9]*)$/;
					if($("#price").val()==""||!reg.test($("#price").val())){
						$("#price_msg").html("价格不能为空,0或非数字 ").css("color","red");
						result=false;
	 	   			} 
					else{
						$("#price_msg").html("验证通过 ").css("color","green");
						}
					return result;
 			}
			function checkAll(){
				var result=true;
				if(checkGoodsName()==false)
					result=false;
				if(checkDanWei()==false)
					result=false;
				if(checkPrice()==false)
					result=false
					if(result==true){
 		 				return confirm("确定要提交吗");
 		 		}
				if(result==false){
					alert("部分信息错误请重新修改");
				}
				return result;
			}
			function chongzhi(){
				$("#select1").val(-1).change();
			}
			$(function(){
				
				 $("input[type=text],textarea").focus(function(){
					  $(this).addClass("input_focus");
					}).blur(function(){
							$(this).removeClass("input_focus");
					});

				$(".form_btn").hover(function(){
						$(this).css("color","red").css("background","#6FB2DB");
					},
					
					function(){
						$(this).css("color","#295568").css("background","#BAD9E3");
					});	
				$("#goodsName").focus(function(){
					$("#goodsName_msg").html("2-20位非空白字符").css("color","#8FA0AC");
				}).blur(checkGoodsName);
				$("#danwei").focus(function(){
					$("#danwei_msg").html("1-10非空字符").css("color","#8FA0AC");
				}).blur(checkDanWei);
				$("#price").focus(function(){
					$("#price_msg").html("不能为空,以元位单位可以是小数").css("color","#8FA0AC");
				}).blur(checkPrice);
				
				$("#select1").change(function(){
					$("#select2").empty();
					var pId=this.value;
					if(pId=="-1"){
						$("#select2").append("<option>-所属小分类-</option>");
					}
					else{
						$.ajax({
							url:"GoodsServlet.do",
							type:"get",
							cache:false,
							async:true,
							dataType:"json",   //一定不要写成大写
							data:{flag:"small",parentId:pId},  //把选中的一级菜单的ID传给服务端
							success:function(cateList){
				
								$.each(cateList,function(k,cate){
									var str="<option value='"+cate.id+"'>"+cate.cateName+"</option>" ;
									$("#select2").append(str);
								});	
							}
							
						});
					}
				});
				$("#select1").change();
				 $("#zz").click(function(){
					 $("#picpath").click().change(function(){
						 $("#img").attr("src",URL.createObjectURL(this.files[0]));//window.URL.createObjectURL(this.files[0]) 可以看成是返回this这个文件的路径 
					 });
				});
			});		
	</script>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	
	
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
     <div class ="div_title">
		 <div class="div_titlename"> <img src="images/san_jiao.gif" ><span>商品管理 商品添加</span></div>
	 </div>
				 
	 <form name="form" action="GoodsServlet.do?flag=modify&goodsId=${param.goodsId}" enctype="multipart/form-data" method="post">
		 <table  class="edit_table" >
		 		<tr>
		 			 	<td  class="td_info">商品名称:</td>	
		 			 	<td  class="td_input_short"> <input type="text" class="txtbox" id="goodsName" name="goodsName" value="${param.goodsName}"/> </td>   
		 			 	<td><label class="validate_info" id="goodsName_msg"  >2-20位非空白字符</label></td> 
		 		</tr>
		 		<%
		 		CateDao dao=new CateDao();
		 		List<CateInfo> cateList =dao.getCateList(0);
		 		request.setAttribute("cateList", cateList);
		 		%>
		 		<tr>
		 			 	<td class="td_info">所属分类:</td>	
		 			 	
		 			 	<td class="td_input_short">
		 			 	<select id="select1" name="select1">
						  <option value="-1" >-所属大分类-</option>
						   <c:forEach var="cate" items="${cateList}">
						   <c:choose>
						   <c:when test="${cate.id==param.select1}">
								<option value="${cate.id}"  selected>${cate.cateName}</option>
							</c:when>
							<c:otherwise><option value="${cate.id}">${cate.cateName}</option></c:otherwise>
						   </c:choose>
						   </c:forEach>
						</select> 
						<select id="select2" name="select2">
						   <option value="-1">-所属小分类-</option>
						</select>
						 </td>   
		 			 	<td><label class="validate_info" id="goodsName_msg"  >请指定商品所属分类</label></td> 
		 		</tr>
		 		
		 			<tr>
		 				<td class="td_info">计量单位:</td>	
		 				<td><input type="text"  class="txtbox"  name="danwei"  id="danwei" value="${param.danwei}"/></td> 
		 				<td><label  class="validate_info" id="danwei_msg" >1-10非空字符</label></td>	
		 			</tr>
		 			
		 			<tr>
		 				<td class="td_info">商品价格:</td>	
		 				<td><input type="text" class="txtbox" id="price" name="price" value="${param.price}" /> </td>
		 				<td><label  class="validate_info"  id="price_msg">不能为空,以元为单位,可以是小数</label></td>	
		 		</tr>
		 		
		 		<tr>
		 				<td class="td_info">生产厂商:</td>	
		 				<td><input type="text" class="txtbox" id="pwdconfirm" name="pwdconfirm" value="${param.pwdconfirm}" /> </td>
		 				<td><label  class="validate_info"  id="pwdconfirm_msg"></label></td>	
		 		</tr>
		 		
		 		<tr>
		 				<td class="td_info">商品图片:</td>	
		 				<td>
		 				<input  type="file" name="picpath" id="picpath" style="display: none;" accept="image/gif,image.jpg,image/png">
		 				<input type="button" id="zz" value="找找.."><br>
		 				<img id="img" alt="" src="GoodsServlet.do?flag=showImg&goodsId=${param.goodsId}"  width="100">
		 				</td>
		 				
		 		</tr>
		 		
		 		<tr>
		 			<td class="td_info">备注信息:</td>	
		 			<td><textarea rows="4" cols="27" name="note" id="note" class="txtarea"  >${param.note}</textarea> </td>	
		 			<td><label></label></td>	
		 		</tr>
		 		
		 		<tr>
		 			<td class="td_info"> </td>	
		 			<td> 
		 			<input class="form_btn" type="submit" value="提交" onclick="return checkAll()"/> 
		 			<input type="reset"  class="form_btn" value="重置" onclick="chongzhi()" /> </td>	
		 			<td>
		 				<label id="result_msg" class="result_msg">${msg}</label>
		 			</td>	
		 		</tr>
		</table>
     </form>
  </body>
</html>